<template>
  <div style="background:#f1f1f1">
    <p @click="$router.back(-1)" class="back_p"><span><i class="el-icon-arrow-left"></i>返回</span><span>{{orgname}}</span></p>
    <el-table
      :data="assess3List"
      style="width: 92%;font-size:13px;margin: 20px auto"
    >
      <el-table-column
        type="index"
        width="50"
        label="序号"
      >
      </el-table-column>
      <el-table-column
        prop="hash.borgname"
        label="考核对象"
      >
      </el-table-column>
      <el-table-column
        prop="hash.year"
        label="年度"
      >
      </el-table-column>
      <el-table-column
        prop="hash.date"
        label="填报日期"
      >
      </el-table-column>
      <el-table-column
        prop="hash.statusname"
        label="状态"
      >
      </el-table-column>
      <el-table-column
        label="操作"
        width="120"
      >
        <template slot-scope="scope">
          <el-button
            v-if="scope.row.hash.statusname=='已完成'"
            @click="getdetailList2(scope.row)"
            type="primary"
            size="small"
          >
            查看
          </el-button>
          <el-button
            @click="edit(scope.row)"
            v-else-if="scope.row.hash.statusname=='草稿'"
            type="primary"
            size="small"
          >
            编辑
          </el-button>
          <el-button
            @click="edit(scope.row)"
            v-else
            type="primary"
            size="small"
          >
            填报
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog
      title="编辑"
      :visible.sync="showDetail"
      width="80%"
    >
      <el-table
        ref="filterTable"
        :data="detailList"
      >

        <el-table-column
          prop="hash.nclassifyname"
          label="类别"
        >
        </el-table-column>
        <el-table-column
          width="140"
          label="指标名称"
        >
          <template slot-scope="scope">
            {{scope.row.hash.nname}}
            <el-tooltip class="item" effect="dark" :content="scope.row.hash.ntext" placement="top-start">
              <i class="el-icon-question"></i>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column
          prop="hash.nvalue"
          label="分值上限"
        >
        </el-table-column>
        <el-table-column
          label="得分"
        >
          <template slot-scope="scope">
            <el-input v-model="scope.row.hash.score" clearable></el-input>
          </template>
        </el-table-column>
        <el-table-column

          label="说明"
        >
          <template slot-scope="scope">
            <el-input
              type="textarea"
              :rows="2"
              placeholder="请输入内容"
              v-model="scope.row.hash.remark"
            >
            </el-input>
          </template>
        </el-table-column>
        <el-table-column
          label="附件"
          width="200"
        >
          <!-- <template slot-scope="scope">
            <el-button
              type="primary"
              size="small"
              @click="getloadList(scope.row)"
            >
              查看
            </el-button>
          </template> -->
          <template slot-scope="scope">
            <el-upload
              class="upload-demo"
              action="url"
              :fileList="fileList"
              multiple
              :limit="3"
              :autoUpload="false"
              :onChange="changefileList"
              ref="upload"
              :httpRequest="upload3"
              :onRemove="removeImg3"
            >
              <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
            </el-upload>
          </template>
        </el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button @click="saveEdit">暂 存</el-button>
        <el-button type="primary" @click="sumitEdit">提 交</el-button>
      </span>
      <el-dialog
        width="30%"
        title="作证材料"
        :visible.sync="showDetail2"
        appendToBody
      >
        <el-table
          :data="loadList"
        >

          <el-table-column
            prop="hash.fname"
            label="附件名称"
          >
          </el-table-column>
          <el-table-column
            label="操作"
            width="120"
          >
            <template slot-scope="scope">
              <a :href="'http://perform.lo'+scope.row.hash.furl">下载</a>
            </template>
          </el-table-column>
        </el-table>
      </el-dialog>
    </el-dialog>


    <el-dialog
      title="查看"
      :visible.sync="checkdetail"
      width="80%"
    >
      <el-table
        ref="filterTable"
        :data="detailList2"
      >

        <el-table-column
          prop="hash.nclassifyname"
          label="类别"
        >
        </el-table-column>
        <el-table-column
          width="140"
          label="指标名称"
        >
          <template slot-scope="scope">
            {{scope.row.hash.nname}}
            <el-tooltip class="item" effect="dark" :content="scope.row.hash.ntext" placement="top-start">
              <i class="el-icon-question"></i>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column
          prop="hash.nvalue"
          label="分值上限"
        >
        </el-table-column>
        <el-table-column
          label="得分"
          prop="hash.score"
        >
        </el-table-column>
        <el-table-column
          prop="hash.remark"
          label="说明"
        >
        </el-table-column>
        <el-table-column
          label="附件"
          width="200"
        >
          <template slot-scope="scope">
            <el-button
              type="primary"
              size="small"
              @click="getloadList(scope.row)"
            >
              查看
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-dialog
        width="30%"
        title="作证材料"
        :visible.sync="showDetail2"
        appendToBody
      >
        <el-table
          :data="loadList"
        >

          <el-table-column
            prop="hash.fname"
            label="附件名称"
          >
          </el-table-column>
          <el-table-column
            label="操作"
            width="120"
          >
            <template slot-scope="scope">
              <a :href="'http://perform.lo'+scope.row.hash.furl">下载</a>
            </template>
          </el-table-column>
        </el-table>
      </el-dialog>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      ts: this.newStore(),
      assess3List: [],
      detailList: [],
      detailList2: [],
      fileList: [],
      loadList: [],
      oldFileName: [],
      newFileUrl: [],
      showDetail: false,
      showDetail2: false,
      checkdetail: false,
      orgname: `${this.$route.query.name} / ${this.$route.query.orgname}`,
    };
  },
  created() {
    this.getassess3List();
  },
  methods: {
    sumitEdit() {
      for (let i = 0; i < this.detailList.length; i += 1) {
        const req = {
          handle: '04A3682CDCA57EBA0DA6C15FB2ECC84BCA84805E79423194912542CE513CBE21',
          score: this.detailList[i].hash.score,
          remark: this.detailList[i].hash.remark,
          status: '1',
          taskid: this.detailList[i].hash.id,
          oldFileName: this.oldFileName,
          newFileUrl: this.newFileUrl,

        };
        this.spost(this.ts, '/mainservlet', req).then(() => {
          this.$message({
            message: '提交成功！',
            type: 'success',
          });
          this.showDetail = false;
          this.getassess3List();
        });
      }
    },
    removeImg3(file) {
      this.fileList.splice(this.fileList.indexOf(file), 1);
    },
    upload3() {
      for (let i = 0; i < this.fileList.length; i += 1) {
        const req = {};
        req.oriFileName = this.fileList[i].name;
        req.value = this.fileList[i].data;
        this.spost(this.ts, '/upload2.jsp', req).then((ts) => {
          this.oldFileName.push(ts.d.oldFileName);
          this.newFileUrl.push(ts.d.newFileUrl);
        });
      }
    },
    changefileList(file) {
      const flieData = {};
      file = file.raw;
      const fileType = file.type;
      const fileReader = new FileReader();
      fileReader.readAsDataURL(file);
      fileReader.onload = (event) => {
        const a = event.target.result;
        const sendData = a.replace(`data:${fileType};base64,`, '');
        flieData.name = file.name;
        flieData.data = sendData;
        this.fileList.push(flieData);
        this.upload3();
      };
    },
    getloadList(item) {
      this.showDetail2 = true;
      const req = {
        handle: '04A3682CDCA57EBA0DA6C15FB2ECC84B7C366576706DB4F48DE1C2E19369CBFBBFF0B9210751F692',
        taskid: item.hash.id,
      };
      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        this.loadList = ts.d.data.operation1;
      });
    },
    saveEdit() {
      for (let i = 0; i < this.detailList.length; i += 1) {
        const req = {
          handle: '04A3682CDCA57EBA0DA6C15FB2ECC84BCA84805E79423194912542CE513CBE21',
          score: this.detailList[i].hash.score,
          remark: this.detailList[i].hash.remark,
          status: '0',
          taskid: this.detailList[i].hash.id,
          oldFileName: this.oldFileName,
          newFileUrl: this.newFileUrl,

        };
        this.spost(this.ts, '/mainservlet', req).then(() => {
          this.$message({
            message: '暂存成功！',
            type: 'success',
          });
          this.showDetail = false;
          this.getassess3List();
        });
      }
    },
    edit(item) {
      this.showDetail = true;
      const req = {
        handle: '04A3682CDCA57EBA0DA6C15FB2ECC84B7C366576706DB4F4DF48646BA6C3FA56',
        aorgid: item.hash.aorgid,
        borgid: item.hash.borgid,
        propertyid: item.hash.propertyid,
        time: item.hash.time,
        norm_ntype: '2',
      };
      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        this.detailList = ts.d.data.operation1;
      });
    },
    getdetailList2(item) {
      this.checkdetail = true;
      const req = {
        handle: '04A3682CDCA57EBA0DA6C15FB2ECC84B7C366576706DB4F4DF48646BA6C3FA56',
        aorgid: item.hash.aorgid,
        borgid: item.hash.borgid,
        propertyid: item.hash.propertyid,
        time: item.hash.time,
        norm_ntype: '2',
      };
      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        this.detailList2 = ts.d.data.operation1;
      });
    },
    getassess3List() {
      const req = {
        handle: '04A3682CDCA57EBA0DA6C15FB2ECC84B7C366576706DB4F442052B8831706317BFF0B9210751F692',
        aorgid: this.$route.query.aorgid,
        borgid: this.$route.query.borgid,
        propertyid: this.$route.query.propertyid,
        norm_ntype: '2',
      };
      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        this.assess3List = ts.d.data.operation1;
        this.assess3List.forEach((element) => {
          [element.hash.year] = [element.hash.time.split('-')[0]];
          [element.hash.date] = [element.hash.time.substring(element.hash.time.indexOf('-') + 1)];
        });
      });
    },
  },
};
</script>

<style lang="stylus" scoped>
.w_tip
  width 200px
  line-height 27px
  float left
.el-input--suffix .el-input__inner
  font-size 13px
.el-button
  font-size 13px
.back_p
  text-align center
  height 55px
  line-height 55px
  cursor pointer
  padding 0 30px
  background #fff
  box-shadow 0px 1px 5px #ccc
  span
    &:first-child
      float left
    &:last-child
      font-size 18px
      color #26a2ff
      padding-right 60px
.el-select
  width 14%
  margin-right 1%
.select_top
  width 92%
  margin 20px auto
.el-col
  padding: 20px 10px;
</style>
